
<template>
  <div>
    <BasePanel title="招投标信息" :one="true">
      <Table
          :columns="qualColumns"
          :row-key="(record,index ) => index"
          :data-source="dataSource"
          :pagination="pagination"
          :loading="loading"
          @change="handleTableChange"
          bordered
      >
        <template #indexSlot="{ index }">{{(pagination.current-1)*10+index+1}}</template>

        <template #detail="{ record }"><span class="blue pointer" @click="openDetail(record)">查看</span></template>
      </Table>


    </BasePanel>
    <Modal v-model:visible="visible" title="详细内容" :width="800" :footer="null" :centered="true">
      <Descriptions :column="2">
        <DescriptionsItem label="招标代理单位名称">{{ recordDetail.agencyCorpName }}</DescriptionsItem>
        <DescriptionsItem label="建设单位">{{ recordDetail?.buildCorpName }}</DescriptionsItem>
        <DescriptionsItem label="项目经理/总监理工程师姓名">{{ recordDetail?.constructorName }}</DescriptionsItem>
        <DescriptionsItem label="数据等级">{{ recordDetail?.dataLevel }}</DescriptionsItem>
        <DescriptionsItem label="中标通知书编号">{{ recordDetail?.tbtenderNo }}</DescriptionsItem>
        <DescriptionsItem label="招标类型">{{ recordDetail?.tenderClass }}</DescriptionsItem>
        <DescriptionsItem label="中标单位名称">{{ recordDetail?.tenderCorpName }}</DescriptionsItem>
        <DescriptionsItem label="中标金额（万元）">{{ recordDetail?.tenderMoney }}</DescriptionsItem>
        <DescriptionsItem label="工程名称">{{ recordDetail?.tenderPrjName }}</DescriptionsItem>
        <DescriptionsItem label="中标日期">{{ parseTime(recordDetail.tenderResultDate )  }}</DescriptionsItem>
        <DescriptionsItem label="招标方式">{{ recordDetail?.tenderType }}</DescriptionsItem>
      </Descriptions>
    </Modal>
  </div>

</template>

<script lang="ts">
import {defineComponent, inject, onMounted, reactive, toRefs, ref } from 'vue';
import {Form, Input, Button, Select, Table, Row, Col, Modal, Descriptions} from "ant-design-vue";
import { BasePanel } from '/@/components/panelComponent/index';
import { getprjTenderApi } from '/@/api/pro';
import { parseTime } from '/@/utils';
interface pageConfig {
  current: number;
  total: number;
  pageSize: number;
}
const qualColumns = [
  { title: '序号', dataIndex: 'index', width: 70, align: 'center', slots: ({ customRender: 'indexSlot' }) },
  { title: '中标单位', dataIndex: 'tenderCorpName' },
  { title: '中标通知书编号', dataIndex: 'tbtenderNo' },
  { title: '招标类型', dataIndex: 'tenderClass' },
  { title: '招标方式', dataIndex: 'tenderType' },
  { title: '中标金额（万元）', dataIndex: 'tenderMoney' },
  { title: '中标时间', dataIndex: 'tenderResultDate' ,customRender: ({ record })=> parseTime(record.tenderResultDate) },
  { title: '详情', dataIndex: 'tbtenderId' ,slots: ({ customRender: 'detail' })}
]

export default defineComponent({
  components: {
    BasePanel, Table ,Form, Row, Col,FormItem: Form.Item,Modal,
    Descriptions,DescriptionsItem:Descriptions.Item,
    Input, Button, Select, Option: Select.Option},
  setup() {
    const applyId = inject('applyId') as string;
    const dataSource = ref<unknown[]>([]);
    const loading = ref<boolean>(false);
    const visible = ref<boolean>(false);
    const recordDetail = ref<any>()
    const paginationRef = ref<pageConfig>({
      current: 1,
      total: 0,
      pageSize: 10 //每页中显示10条数据
    })

    const queryParam = reactive({
      applyId:applyId,
      current:1,
      size:10
    })

    const getTableList = () => {
      loading.value = true;
      getprjTenderApi(queryParam).then(({ data, success }) => {
        if(success) {
          let { records, size, total } = data;
          dataSource.value = records;
          paginationRef.value.total = total;
          paginationRef.value.pageSize = size;
          loading.value = false;
        }
      })
    }

    const init = () => {
      getTableList();
    }
    const openDetail = data =>{
      recordDetail.value = data
      visible.value = true;
    }

    const handleTableChange = (data: pageConfig) => {
      paginationRef.value = data;
      queryParam.current = data.current;
      queryParam.size = data.pageSize;
      getTableList();
    }
    onMounted(init)
    return {
      queryParam, qualColumns, pagination:paginationRef,dataSource,loading,openDetail,
      ...toRefs(queryParam), getTableList ,handleTableChange,visible,recordDetail , parseTime
    }
  },
})
</script>

<style lang="less" scoped>
.ant-tabs {
  margin-top: -60px;

  ::v-deep(.ant-tabs-nav-scroll) {
    display: flex;
    flex-direction: row-reverse;
  }
}

.filter{
  position: absolute;
  top: 20px;
  right: 20px;
  width: 600px;
}
</style>
